<template>
  <div class="details-div">
    <div style="width: 500px;">
      <el-row>
        <el-col>
          <el-card :body-style="{ padding: '14px' }" class="card-content">
            <!-- 多张图片处理 -->
            <div v-if="form.images.length !== 0" class="image-gallery">
              <img v-for="(item, index) of form.images" :key="index" :src="item" class="image" />
            </div>
            <!-- 单张图片处理 -->
            <div v-else class="image-gallery">
              <img :src="form.image" class="image" />
            </div>

            <!-- 档案标题 -->
            <div class="form-item">
              <span>档案标题：</span>
              <el-input v-model="form.title" style="width: 180px;" />
            </div>

            <!-- 档案人描述 -->
            <div class="form-item">
              <span>档案人描述：</span>
              <textarea cols="55" rows="5" v-model="form.content" class="description"></textarea>
            </div>

            <!-- 事件所属类型 -->
            <div class="form-item">
              <span>事件所属类型：</span>
              <div class="channel-buttons">
                <el-button type="danger" text v-for="(item, index) of form.channelNames" :key="index">{{ item.name }}</el-button>
              </div>
            </div>

            <!-- 档案使用状态 -->
            <div class="form-item">
              <span>档案使用状态：</span>
              <el-switch
                  v-model="form.enable"
                  class="ml-2"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                  :active-value="1"
                  :inactive-value="0"
              />
            </div>

            <!-- 档案发布时间 -->
            <div class="form-item">
              <span>档案发布时间：</span>
              <el-date-picker
                  v-model="form.publishDate"
                  type="datetime"
                  placeholder="请重新输入发布时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  class="date-picker"
              />
            </div>

            <!-- 档案审核状态原因 -->
            <div class="form-item">
              <span>档案审核状态原因：</span>
              <div class="status-buttons">
                <el-button type="danger" text v-if="form.status === 4">未通过原因：{{ form.remark }}</el-button>
                <el-button type="success" text v-if="form.status === 5">一级审核通过</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 标题展示 -->
    <div class="title-div">
      <img src="../assets/1111111111.jpg" width="100px" height="80px" alt="Logo">
      <h2>民安档案展示</h2>
      <p><span>档案编号：</span>{{ form.id }}</p>
    </div>

    <!-- 对应的视频展示 -->
    <div class="video-div">
      <video :src="form.videoContent" controls width="500px" height="340px"></video>
    </div>

    <!-- 对应的手绘图片展示 -->
    <div class="plan-div">
      <el-empty :image="form.planContent" />
    </div>

    <!-- 小的log图 -->
    <div class="xinku-div">
      <img src="https://www.yaoxuangou.cn/imgextra/pro/2019/11/19/944c41926efd48d0f9edfa18dabaf945da3a7b8a-AHMX.jpg" width="300px" alt="Thank You">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import CryptoJS from 'crypto-js';
import { detalisSelectJs } from "../api/files/files.js";

// 获取路由参数中的 id 并进行解密
const route = useRoute();
const val = route.query.val;
const secretKey = 'mySecretKey123';
const bytes = CryptoJS.AES.decrypt(val, secretKey);
const decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
const token = localStorage.getItem("token");

// 定义接受参数表单
const form = ref({
  filesId: null,
  images: [],
  title: null,
  content: null,  // 基本描述内容
  status: null,
  publishDate: null,  // 初始化为 null
  vedioImg: null,
  channels: [],  // 类型集合id,
  enable: null,
  imageUrl: [],
  speechContent: null
});

// 查询详情数据
async function showDetalis() {
  try {
    const res = await detalisSelectJs(decryptedData);
    if (res.data.code === 200) {
      const data = res.data.data;
      form.value = { ...data };

      // 确保 publishDate 是一个有效的日期字符串
      if (data.publishDate) {
        form.value.publishDate = new Date(data.publishDate).toISOString().slice(0, 19).replace('T', ' ');
      } else {
        form.value.publishDate = null;  // 如果没有 publishDate，设置为 null
      }

      // 将 enable 转换为整数
      form.value.enable = parseInt(data.enable);
    }
  } catch (error) {
    console.error("Error fetching details:", error);
  }
}

onMounted(() => {
  showDetalis();
});
</script>

<style>
/* 设置全局背景 */
.details-div {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 优化卡片样式 */
.el-card {
  width: 100%;
  max-width: 500px; /* 设置最大宽度，确保在小屏幕上不会溢出 */
  margin-bottom: 20px;
  transition: transform 0.2s ease-in-out;
}

.el-card:hover {
  transform: scale(1.02);
}

/* 卡片内部间距 */
.el-card__body {
  padding: 20px;
}

/* 图片展示区域 */
.image-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 允许图片换行 */
  margin-bottom: 20px;
}

.image {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover; /* 确保图片比例不变 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.image:hover {
  transform: scale(1.05);
}

/* 单张图片处理 */
.single-image {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.single-image:hover {
  transform: scale(1.05);
}

/* 输入框样式 */
.el-input {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}

/* 文本区域样式 */
textarea {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: none;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease;
}

textarea:focus {
  border-color: #409eff;
  outline: none;
}

/* 按钮样式 */
.el-button {
  margin: 0 auto;
  margin-bottom: 10px;
  display: block;
  width: fit-content;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #f56c6c;
}

/* 开关样式 */
.el-switch {
  margin-left: 10px;
}

/* 日期选择器样式 */
.el-date-editor {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}

/* 确保日期选择器的输入框显示 */
.el-date-editor .el-input__inner {
  color: #000 !important;
}

/* 确保日期选择器的占位符显示 */
.el-date-editor .el-input__placeholder {
  color: #999 !important;
}

/* 状态显示样式 */
.status-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.status-buttons .el-button {
  padding: 8px 20px;
  font-size: 16px;
}

/* 视频展示 */
.video-div {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.video-div video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.video-div:hover {
  transform: scale(1.02);
}

/* 手绘图片展示 */
.plan-div {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.plan-div .el-empty {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.plan-div:hover {
  transform: scale(1.02);
}

/* 标题展示 */
.title-div {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.title-div img {
  width: 100px;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-div h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}

.title-div p {
  font-size: 18px;
  color: #7f8c8d;
}

/* 小的 logo 图 */
.xinku-div {
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.xinku-div img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.xinku-div:hover {
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .details-div {
    padding: 10px;
  }

  .el-card {
    max-width: 100%;
  }

  .image {
    width: 100%;
    max-width: 200px;
  }

  .single-image {
    max-width: 200px;
  }
}
</style>